<!DOCTYPE html>
<html lang="zh" xmlns:th="http://www.thymeleaf.org">

<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
    <title>用户管理</title>
</head>
<body>

<!--查看消息详情模态框-->
<button id="batch-notic-get-button" style="display: none" data-toggle="modal" data-target="#batch-notic-get"></button>
<div class="modal fade" id="batch-notic-get" tabindex="-1" role="dialog" aria-labelledby="noticModalLabelBatch" aria-hidden="true">
    <div class="modal-dialog" style="max-width: 100%;width: 1300px">
        <div class="modal-content">
            <div class="modal-header">
                <h4 class="modal-title" id="noticModal_title_batch"></h4>
            </div>
            <div class="modal-body">
                <div style="margin-bottom: 15px">
                    <span id="noticModal_info_batch"> </span>
                </div>
                <div class='card' id="batch-notic-chart-card">
                    <div class='card-body' style="padding: 10px 10px 20px 10px">
                        <div class='col-md-12' id="notic_data_chart_batch" style="width:1250px;height:250px;">
                        </div>
                    </div>
                </div>
                <!--<div id="notic_data_chart" class="col-md-12" style="height: 250px"></div>-->
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-primary" data-dismiss="modal">关闭</button>
            </div>
        </div><!-- /.modal-content -->
    </div><!-- /.modal -->
</div>

<!--新建消息模态框-->
<button style="display: none" id="newNotic-button" data-toggle="modal" data-target="#newOne-notic-modal">新建消息</button>
<div class="modal fade" id="newOne-notic-modal" tabindex="-1" role="dialog" aria-labelledby="noticModalLabel" aria-hidden="true">
    <div class="modal-dialog" style="max-width: 100%;width: 800px">
        <div class="modal-content">
            <div class="modal-header">
                <h4 class="modal-title" >新建推送</h4>
                <button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
            </div>
            <div class="modal-body">
                <div class="form-group">
                    <div class="input-group">
                        <div class="input-group-prepend">
                            <span class="input-group-text bg-primary text-white" >标题</span>
                        </div>
                        <input id="new-notic-title" type="text" class="form-control" placeholder="请输入标题......" style="width: 650px; background-color: #F1F1F1">
                    </div>
                </div>
                <div class="form-group" style="margin-top: 20px">
                    <div class="input-group">
                        <div class="input-group-prepend">
                            <span class="input-group-text bg-primary text-white">内容</span>
                        </div>
                        <textarea id="new-notic-info" autocomplete="off" class="form-control" rows="10" placeholder="请输入推送内容......"  style="resize: none;width: 650px; background-color: #F1F1F1 "></textarea>
                    </div>
                </div>
                <div class="form-group" style="margin-top: 20px">
                    <div class="input-group">
                        <div class="input-group-prepend">
                            <span class="input-group-text bg-primary text-white" >状态</span>
                        </div>
                        <div id="new-notic-state" class="form-control" style="width: 650px; background-color: #F1F1F1">
                            <input class="radio-notic" type="radio" name="new-notic-state" value="normal" id="new-notic-state-normal">普通
                            <input class="radio-notic" type="radio" name="new-notic-state" value="warning" id="new-notic-state-warning" >警告
                            <input class="radio-notic" type="radio" name="new-notic-state" value="error" id="new-notic-state-error" >危险
                        </div>
                    </div>
                </div>
                <div class="form-group" style="margin-top: 20px">
                    <div class="input-group">
                        <div class="input-group-prepend">
                            <span class="input-group-text bg-primary text-white" >权限</span>
                        </div>
                        <div id="new-notic-authority" class="form-control" style="width: 650px; background-color: #F1F1F1">
                            <input class="radio-notic" type="radio" name="new-notic-authority" value="all" id="new-notic-authority-all">全部
                            <input class="radio-notic" type="radio" name="new-notic-authority" value="customer" id="new-notic-authority-customer" >客户
                            <input class="radio-notic" type="radio" name="new-notic-authority" value="manager" id="new-notic-authority-manager" >管理员
                        </div>
                    </div>
                </div>
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-default" data-dismiss="modal">关闭</button>
                <button type="button" class="btn btn-primary" onclick="sendOneNotic()">发送</button>
            </div>
        </div><!-- /.modal-content -->
    </div><!-- /.modal -->
</div>

<!--新建消息模态框-->
<div class="modal fade" id="delete-notic-modal" tabindex="-1" role="dialog" aria-labelledby="noticModalLabel" aria-hidden="true">
    <div class="modal-dialog" style="max-width: 100%;width: 800px">
        <div class="modal-content">
            <div class="modal-header">
                <h4 class="modal-title" >删除推送</h4>
                <button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
            </div>
            <div class="modal-body">
                是否需要删除推送<span id="delete-notic-id"></span>?
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-primary">确定</button>
            </div>
        </div><!-- /.modal-content -->
    </div><!-- /.modal -->
</div>


<div class="content-wrapper">
    <div class='row' style='margin-bottom: -50px'>
        <div class="col-lg-12 grid-margin stretch-card">
            <div class="card">
                <div class="card-body">
                    <div class="col-md-2 updateMenu-title-left" style="margin:0px 0px 10px 0px; padding: 0px">
                        <h4 class="card-title" style="font-size: 25px">消息推送管理</h4>
                        <p class="card-description" style="margin-bottom: 0px">系统消息或设备运行警报</p>
                    </div>
                    <div class=" updateMenu-title-left" style="margin:0px 20px">
                        <div class="input-group">
                            <div class="input-group-prepend" >
                                <select id="modal_parm" class="magic btn btn-warning " style="border-radius: 5px 5px 5px 5px" >
                                    <option value="sulfurDioxide">时间</option>
                                    <option value="nitrogenOxide">状态</option>
                                    <option value="particulate">消息等级</option>
                                </select>
                            </div>
                        </div>
                    </div>
                    <div class=" updateMenu-title-left" style="margin:0px 20px">
                        <button type="button" class="btn btn-success" onclick="showNewNoticModal()">新建消息</button>
                    </div>
                    <div class="table-responsive pt-3">
                        <table class="table table-bordered" style="background-color: white; border: 1px solid #868686;">
                            <thead>
                            <tr>
                                <th>ID</th>
                                <th>标题</th>
                                <th>公司</th>
                                <th>时间</th>
                                <th style="width: 250px">操作</th>
                            </tr>
                            </thead>
                            <tbody >
                            <tr th:each="notic,iterStat:${noticList}" th:class="${notic.noticState}+' notic-batch-tr noticItem'" >
                                <td class="notic-id" th:text="${notic.id}" ></td>
                                <td th:text="${notic.title}" ></td>
                                <td th:text="${notic.companyName}" ></td>
                                <td th:text="${notic.timeString}" ></td>
                                <td >
                                    <button class="small-button btn btn-danger delete-notic-button" >删除</button>
                                    <button class="small-button btn btn-info get-notic-button" >查看</button>
                                </td>
                            </tr>
                            </tbody>
                        </table>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>

<script th:src="@{/js/overWrite/batch-notic.js}"></script>

</body>
</html>